/**
 * @class NG.views.InfoActionList
 * @extends NG.util.List
 * This panel is used for listing actions such as area, line measurements.
 * This component is registered as 'netgis-infoactionlist' name.<br>
 * When an item of list is tapped {@link NG.views.MapView#setQueryMode} method is invoked.
 * 
 */
NG.views.InfoActionList = Ext.extend(NG.util.List, {
	scroll: 'vertical',
	singleSelect: true,
    itemTpl: 
		'<tpl>' +
			'<table>' + 
				'<tr>' +
					'<td><div id="{mode}" class="{className}Off" width="100%"></div></td>' +
					'<td>&nbsp;{name}</td>' +
				'</tr>' +
			'</table>' +
		'</tpl>',
    initComponent: function(){
        this.store = this.createStore();
        this.itemTpl = new Ext.XTemplate(
        		'<tpl>' ,
    			'<table>' , 
    				'<tr>' ,
    					'<td><div id="{mode}" class="{className}Off" width="100%"></div></td>' ,
    					'<td>&nbsp;{name}</td>' ,
    				'</tr>' ,
    			'</table>' ,
    		'</tpl>'
        );
        this.listeners = {
    	    itemtap: function(sender, index, item, e) {
    	    	/*
    	    	var ele = Ext.get(sender.store.getAt(index).getMode());
    	    	var newClassName = null;
    	    	if (ele.dom.className.endsWith("Off")) {
    	    		newClassName = ele.dom.className.replace("Off", "On");
    	    	} else if (ele.dom.className.endsWith("On")) {
    	    		newClassName =  ele.dom.className.replace("On", "Off");            		
    	    	}
    	    	if (newClassName != null) ele.dom.className = newClassName;
    	    	*/
    	    	if (this.overlay)
    	    		this.overlay.hide(true);
    	    	this.mapView.setQueryMode(sender.store.getAt(index));
    	    }
        };
        NG.views.InfoActionList.superclass.initComponent.call(this);
    },
    
    /**
     * 
     * @param {Ext.Panel} panel
     */
    setOverlay: function (panel){
    	this.overlay = panel;
    },
	
    /**
     * Creates the store of the action list.
     * @return {Ext.data.Store}
     */
    createStore: function () {
		return new Ext.data.Store({
			model: 'NG.models.QueryMode',
		    data: [
				{name: L_DOT, mode: MAP_MODE_INFO_POINT, className: 'drawPoint'},
				{name: L_AREA, mode: MAP_MODE_INFO_POLYGON, className: 'drawPolygon'},
				{name: L_SHORTEST_PATH, mode: MAP_MODE_INFO_SHORTEST_PATH, className: 'drawShortest'},
				{name: L_DIST_MEASURE, mode: MAP_MODE_INFO_DISTANCE_MEASURE, className: 'drawDistanceMeasure'},
				{name: L_AREA_CALC, mode: MAP_MODE_INFO_AREA_CALCULATE, className: 'drawAreaCalculate'}
		    ]
		});
    }
});

/**
 * Creates an overlay panel for listing categories.
 * 
 * @param {Object} config Includes mapView id
 * @return {Ext.Panel} info action list panel
 */
NG.views.InfoActionListOverlay = function (config) {
	config = Ext.applyIf(config, {
		id: 'netgis-info-overlay'
	});
	
	if (Ext.get(config.id)) {
		return Ext.getCmp(config.id);
	}
	
	var infoActionList = new NG.views.InfoActionList({
    	id: 'netgis-infoaactionlist-id',
    	mapView: config.mapView		
	});
	
	var overlay = new Ext.Panel({
		id: config.id,
	    floating: true,
	    modal: true,
	    centered: true,
	    width: Ext.is.Phone ? 260 : 400,
	    //height: Ext.is.Phone ? 300 : 500,
	    autoHeight: true,
	    //styleHtmlContent: true,
	    //dockedItems: overlayTb,
	    scroll: 'vertical',
	    dockedItems: [{
			//dock : 'bottom',
			xtype: 'toolbar',
			ui   : 'light',
			defaults: {
				iconMask: true,
				ui: 'plain'				
			},
			items: [{
					iconCls: 'delete',
					handler: function (){
						infoActionList.deselect(infoActionList.getSelectedRecords(), false);
						overlay.hide();
						config.mapView.clearQueryMode();
					}
				}, 
				{xtype: 'spacer'},
				{
					iconCls: 'trash',
					text: L_MARKERS,
					handler: function (){
		            	//overlay.hide(true);
	            		Ext.dispatch({
	            			controller: app.controllers.mapView,
	            			action: 'removeMarkers',
	            			mapView: app.views.mapView
	            		});						
					}
				},
				{
					iconCls: 'trash',
					text: L_DRAWINGS,
					handler: function (){
		            	//overlay.hide(true);
	            		Ext.dispatch({
	            			controller: app.controllers.mapView,
	            			action: 'removeAllFeaturesFromDrawingLayers',
	            			mapView: app.views.mapView
	            		});						
					}
				}
			]
		}],
	    items:[infoActionList],
	    listeners: {
	    	afterrender: function(comp) {}
	    }
	});
	infoActionList.setOverlay(overlay);
	return overlay;	
};


/**
 * @ignore
 */
Ext.reg('netgis-infoactionlist', NG.views.InfoActionList);